<template>
  <div>
    <el-container>
      <el-aside class="left_bar" width="180px">
        <p class="left_title">基础管理</p>
        <el-menu mode="verticle" default-active="5">
          <el-menu-item class="menu-item" index="1" v-on:click="Monitor">监测资质</el-menu-item>
          <el-menu-item class="menu-item" index="2" v-on:click="RatesConfiguration">收费标准配置</el-menu-item>
          <el-menu-item class="menu-item" index="3" v-on:click="FormManager">表单管理</el-menu-item>
          <el-menu-item class="menu-item" index="4" v-on:click="Enterprise">企业信息管理</el-menu-item>
          <el-menu-item class="menu-item" index="5" @click="EnvironmentManager">环境质量点位管理</el-menu-item>
          <el-menu-item class="menu-item" index="6">采样规范管理</el-menu-item>
        </el-menu>
      </el-aside>
      <!-- main部分 -->
      <el-main>
        <el-row class="baseItem">
          <el-col :span="24">
            <el-menu
              default-active="1"
              mode="horizontal"
              background-color="#00BCD4"
              text-color="#F5F5F5"
              @select="handleSelect"
            >
              <el-menu-item index="1">水质断面</el-menu-item>
              <el-submenu index="2">
                <template slot="title">噪音</template>
                <el-menu-item index="2-1">功能区噪声</el-menu-item>
                <el-menu-item index="2-2">区域噪声</el-menu-item>
                <el-menu-item index="2-3">道路交通噪声</el-menu-item>
              </el-submenu>
              <el-menu-item index="3">降尘</el-menu-item>
              <el-menu-item index="4">环境空气</el-menu-item>
              <el-menu-item index="5">降水</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
        <!-- 表单部分 -->
        <!-- 表单标题 -->
        <el-row class="baseItem">
          <el-col :span="2">
            <p>{{title}}</p>
          </el-col>
          <el-col :span="6" :offset="16">
            <el-input placeholder="请输入关键字进行搜索" suffix-icon="el-icon-search"></el-input>
          </el-col>
        </el-row>
        <!-- 表单功能栏 -->
        <el-row class="baseItem">
          <el-col class="fucntionItem" :span="1">
            <el-button type="primary" @click="addNewRecord=true">新增</el-button>
          </el-col>
          <el-col class="fucntionItem" :span="1" :offset="1">
            <el-button type="primary">编辑</el-button>
          </el-col>
          <el-col class="fucntionItem" :span="1" :offset="1">
            <el-button type="primary" @click="deleteMsg">删除</el-button>
          </el-col>
        </el-row>
        <!-- 显示修改、添加工作台 -->
        <el-dialog title="操作台" :visible.sync="addNewRecord" width="80%">
          <!-- 之后添加点击事件 -->
          <el-tabs type="card">
            <el-tab-pane label="基础信息">
              <!-- 基础信息表单信息 -->
              <center style="marginBottom:15px">基础信息</center>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="断面名称：*">
                  <el-input v-model="newEnvMsg.sectionName" class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="断面代码：">
                  <el-input v-model="newEnvMsg.sectionCode" class="shortInput"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="点位性质：">
                  <el-input v-model="newEnvMsg.pointNature" class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="规定类别：">
                  <!-- 上次写到这里了 -->
                  <el-input class="shortInput"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="控制级别：*">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="断面属性：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="水系名称：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="水系代码：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="河流名称：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="河流代码：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="点位名称：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="水平代码：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="是否饮用水源地：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="饮用水源地级别：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="newEnvMsg" label-width="140px" :inline="true">
                <el-form-item label="经度：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
                <el-form-item label="纬度：">
                  <el-input class="shortInput"></el-input>
                </el-form-item>
              </el-form>

              <!-- 基础表单结尾 -->
              <center style="marginBottom:15px">位置信息</center>
              <!-- 位置信息表单 -->
              <div style="marginTop:30px">
                <form>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">省份代码：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">省份名称：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">城市代码：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">城市名称：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">区县代码：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">区县名称：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">乡镇代码：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">乡镇名称：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                </form>
              </div>
              <!-- 拓展信息 -->
              <center style="marginTop:30px">拓展信息</center>
              <!-- 拓展信息表单 -->
              <div style="marginTop:30px">
                <form>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">助记码：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">排序码：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">是否参与计算：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">汇入河流(湖库、海洋)：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">考核省份：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">断面功能：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">所属排名城市：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">监测站：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">河流排序值：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">备注：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                  <div class="locationFormItem">
                    <div style="display:flex">
                      <p style="width:130px">详细地址：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                    <div style="display:flex">
                      <p style="width:120px">监测项目：</p>
                      <el-input class="shortInput"></el-input>
                    </div>
                  </div>
                </form>
              </div>
              <!-- 提交按钮 -->
              <el-row>
                <el-col :span="2" :offset="19">
                  <el-button type="primary" @click="addMsg">确定</el-button>
                </el-col>
                <el-col :span="2" :offset="1">
                  <el-button type="danger" @click="addNewRecord=false">取消</el-button>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="项目及突变阈值">项目及突变阈值</el-tab-pane>
          </el-tabs>
        </el-dialog>
        <!-- 表单内容 -->
        <el-row>
          <el-table :data="environments" @selection-change="handleSelectionChange">
            <el-table-column label="No." width="80"></el-table-column>
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="点位名称" width="350" prop="Name"></el-table-column>
            <el-table-column label="控制级别" width="200" prop="ControlLevel"></el-table-column>
            <el-table-column label="经度" width="200" prop="Longtitude"></el-table-column>
            <el-table-column label="纬度" width="200" prop="Latitude"></el-table-column>
            <el-table-column label="管理" width="100">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
                <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      title: '水质断面',
      environments: [],
      addNewRecord: false,
      selectRows: [],
      deleteRows: [],

      newEnvMsg: {
        name: '',
        addressCode: '',
        categoryId: '',
        type: '',
        provinceCode: '',
        areaProperty: '',
        province: '',
        cityCode: '',
        city: '',
        areaCode: '',
        area: '',
        townCode: '',
        town: '',
        riverName: '',
        riverCode: '',
        waterSourceName: '',
        waterSourceNature: '',
        designCap: '',
        waterSystem: '',
        natureOfSource: '',
        waterCode: '',
        sectionName: '',
        sectionCode: '',
        sectionNatrue: '',
        sectionLvel: '',
        targetLevel: '',
        longtitude: '',
        latitude: '',
        detailAddress: '',
        buildUpArea: '',
        buildUpPeople: '',
        description: '',
        moniStation: '',
        createTime: '',
        examProvince: '',
        monitor: '',
        monitorMethod: '',
        monitorUnit: '',
        funAreaCode: '',
        measurRefer: '',
        measurHeight: '',
        roadName: '',
        roadBeginPoint: '',
        roadWidth: '',
        roadLength: '',
        motorRoads: '',
        roadType: '',
        roadLevel: '',
        version: '',
        ext1: '',
        ext2: '',
        ext3: '',
        controlLevel: '',
        riverIndex: '',
        horizonCode: '',
        isCalc: '',
        pointNature: '',
        orderIndex: '',
        nameSpell: '',
        tagId: '',
        tagName: '',
        isDrinkingWater: '',
        drinkingWaterLevel: '',
        id: '',
        updateTime: ''
      }
    }
  },
  methods: {
    handleSelect: function (key, keyPath) {
      switch (key) {
        case '1':
          this.title = '水质断面'
          break
        case '2-1':
          this.title = '功能区噪声'
          break
        case '2-2':
          this.title = '区域噪声'
          break
        case '2-3':
          this.title = '道路交通噪声'
          break
        case '3':
          this.title = '降尘'
          break
        case '4':
          this.title = '环境空气'
          break
        case '5':
          this.title = '降水'
          break
      }
    },

    Monitor: function () {
      this.$router.push('/base/MonitoringQualification')
    },

    RatesConfiguration: function () {
      this.$router.push('/base/RatesConfiguration')
    },

    FormManager: function () {
      this.$router.push('/base/FormManager')
    },

    Enterprise: function () {
      this.$router.push('/base/EnterpriseInfoManager')
    },

    EnvironmentManager: function () {
      // this.$router.push('/base/EnvironmentManager')
    },

    getAllMsg: function () {
      this.axios
        .get('/BaseData/GetAllEnvirPos', {
          params: {
            pageIndex: 1,
            pageSize: 20
          }
        })
        .then(response => {
          this.environments = response.data
          console.log(this.environments)
        })
    },

    // 添加新的环境记录
    addMsg: function () {
      this.addNewRecord = false
      var params1 = {}
      params1.sectionName = this.newEnvMsg.sectionName
      params1.sectionCode = this.newEnvMsg.sectionCode
      // params. = this.newEnvMsg.
      // params. = this.newEnvMsg.
      // 以下为自创属性
      params1.name = '你好啊啊弟弟'
      this.axios.post('/BaseData/AddEnvirPos', params1).then(res => {
        console.log(res)
        this.getAllMsg()
      })
    },

    // 删除选定的row
    deleteMsg: function () {
      if (this.selectRows == []) {
        return
      }
      for (var one in this.selectRows) {
        this.deleteRows.push(this.selectRows[one].Id)
      }
      this.axios
        .delete('/BaseData/DeleteEnvirPos', { data: this.deleteRows })
        .then(res => {
          console.log(res)
          // 刷新界面
          this.getAllMsg()
        })
    },

    // 记录选中的row
    handleSelectionChange: function (rows) {
      this.selectRows = rows
    }
  },

  // 获取环境点位信息
  beforeMount: function () {
    this.getAllMsg()
  }
}
</script>

<style>
.baseItem {
  margin: 10px;
}

.left_bar {
  background-color: transparent;
  height: 100%;
  background-color: gray;
  color: aliceblue;
}

.left_title {
  text-align: center;
}

.menu-item {
  background-color: transparent;
}

.fucntionItem {
  margin-top: 10px;
}

/* 短输入栏 */
.shortInput {
  width: 400px;
}
/* 位置信息表单,行布局 */
.locationFormItem {
  display: flex;
  justify-content: space-around;
  margin-top: 21px;
}
</style>
